<template>
  <el-container @click="is_drop = false" class="right_body">
    <el-header class="height_auto heder_boder_fot">

      <!--      为了用自定义指令不得不额套个div 让输入框与搜索结果在一个容器内-->
      <div v-clickoutside="clickoutside">
        <el-input class="search" @focus="searchResultShow = true" :placeholder="router_type === 'record'?'请输入人员':'请输入部门、人员'"
                  prefix-icon="el-icon-search" v-model="search_name" @input="searchInput" />
        <!--      @keydown.enter.native="handleSearch"-->

        <!-- 空白时显示树-->
        <el-collapse-transition>
          <div class="search-result" v-show="searchResultShow">

            <section v-show="!search_name">
              <TreeView v-model="selectedList" isCheck :isPersonCheck="router_type === 'record'" :treeData="treeData"/>
              <div class="m-t-14 flex flex-d-r-r">
                <span @click="comparedTree()" class="float-buttom compare-text cursor-p">对比</span>
                <span @click="followTree()" class="float-buttom cancel-text cursor-p">关注</span>
              </div>
            </section>

            <section v-show="search_name">
              <template v-if="router_type !== 'record'">
                <div class="title-name">部门名字</div>
                <div class="area-container">
                  <div v-show="!departmentList.length" class="epmty-text">未找到相关部门</div>

                  <el-checkbox-group v-model="departmentIdsArr">
                    <div v-for="item in departmentList" :key="item.id" class="data-item">
                      <span>{{ item.label }}</span>
                      <el-checkbox :label="item.id"><span></span></el-checkbox>
                    </div>
                  </el-checkbox-group>

                  <div class="m-t-14" style="display: flex; justify-content: flex-end">
                    <span class="float-buttom cancel-text cursor-p" @click="followSearch(1)">关注</span>
                    <span class="float-buttom compare-text cursor-p" @click="compareSearch(1)">对比</span>
                  </div>
                </div>

                <div class="gray-line"/>
              </template>

              <div class="title-name">人员名字</div>
              <div class="area-container">
                <div v-show="!personList.length" class="epmty-text">未找到相关人员</div>

                <el-checkbox-group v-model="personIdsArr">
                  <div v-for="item in personList" :key="item.id" class="data-item">
                    <span>{{ item.label }}</span>
                    <el-checkbox :label="item.id"><span></span></el-checkbox>
                  </div>
                </el-checkbox-group>

                <div class="m-t-14" style="display: flex; justify-content: flex-end">
                  <span class="float-buttom cancel-text cursor-p" @click="followSearch(0)">关注</span>
                  <span class="float-buttom compare-text cursor-p" @click="compareSearch(0)">对比</span>
                </div>
              </div>
            </section>
          </div>
        </el-collapse-transition>

      </div>


      <div class="drop-down" @click.stop="hanleStop" v-if="is_drop">
        <div class="p-9-14-8 drop-box" v-for="(item, index) in search_list" :key="index">
          <div @click="handleUnfold(index, 0)" class="float-head">
            <div>
              <img class="float-head-img m-r-7" :src="item.is_unfold ? xiala_url : xiala_lift_url"/>
              <el-checkbox v-model="item.is_checked" class="m-r-7" @change="handleDropMan(item.is_checked, index)"/>
              <span @click.stop="handleManDutyDrop(item.id, 1)" class="float-head-f">{{ item.label }}</span>
            </div>
          </div>
          <div class="drop-man" v-show="item.is_unfold" v-for="(item_child_name, index_child_name) in item.children"
               :key="index_child_name"
          >
            <el-checkbox
              class="m-r-7"
              v-model="item_child_name.is_checked"
              @change="handleDropMan(item_child_name.is_checked, index, index_child_name)"
            />
            <div class="float-man-l">
              <div v-if="index !== 1 && !item_child_name.url" class="float-man-l-img">
                {{ item_child_name.label.substring(item_child_name.label.length - 2) }}
              </div>
              <img v-if="index !== 1 && item_child_name.url" class="float-man-l-img" :src="item_child_name.url"/>
              <img v-if="index === 1" class="float-man-l-img" src="@/assets/appraise/icon/appraise_bumen.png"/>
              <div @click.stop="handleManDutyDrop(item_child_name, 0)" class="float-man-l-t">{{
                  item_child_name.label
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="m-t-14 flex flex-d-r-r" v-show="search_list.length">
          <span @click="handleCancelDrop" class="float-buttom cancel-text cursor-p">关注</span>
          <span @click="handleComparedDrop" class="float-buttom compare-text cursor-p">对比</span>
        </div>
      </div>


      <div class="m-t-20">
        <div
          @click="handleDuty(index_duty)"
          :style="duty_index === index_duty ? 'background-color: rgba(244,248,255,1); color: rgba(26,101,226,1);' : ''"
          v-for="(item_duty, index_duty) in duty_list"
          :key="index_duty"
          class="p-9-0-8-14"
        >
          <svg-icon class="f-s-18" style="color: #1966E2" class-name="m-r-7" :icon-class="item_duty.url"/>
          <span class="float-head-f">{{ item_duty.title }}</span>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-scrollbar class="fot_body">
        <div @click="is_drop = false" class="p-9-14-8" :class="{ 'hover': item.is_unfold }"
             v-for="(item, index) in float_list" :key="item.f_name">
          <div @click="handleUnfold(index, 1)" class="float-head">
            <div class="department-title" :class="{ 'department-title-active': item.is_unfold }">
              <!-- <img

                  :style="{ transform: item.is_unfold ? 'rotate(0.25turn)' : 'rotate(0)' }"
                  :src="xiala_lift_url"
              /> -->
              <span class="float-head-img m-r-7"><i class="el-icon-caret-bottom"
                                                    :style="{ transform: item.is_unfold ? 'rotate(0)' : 'rotate(-0.25turn)' }"
                                                    :class="{ 'el-icon-caret-bottom': item.is_unfold }"></i></span>
              <span class="float-head-f">{{ item.f_name }}</span>
            </div>
            <div v-show="item.is_unfold" class="oper-checkbox-img-container" @click.stop="handleUnfoldEit(index)">
              <i :style="item.is_select?'color:#1a65e2;':''" class="ri-list-settings-line"></i>
            </div>
          </div>

          <el-collapse-transition>
            <div v-show="item.is_unfold">
              <div class="float-man" v-for="(item_child_name, index_child_name) in item.child" :key="index_child_name">
                <div class="float-man-l" @click="handleManDuty(item_child_name, index)">
                  <div v-if="(index !== 1 && !item_child_name.url) || router_type === 'record'" class="float-man-l-img">
                    {{ item_child_name.name.substring(item_child_name.name.length - 2) }}
                  </div>
<!--                  <img v-if="index != 1 && item_child_name.url" class="float-man-l-img" :src="item_child_name.url"/>-->
                  <img v-if="index === 1 && router_type !== 'record'" class="float-man-l-img" src="@/assets/appraise/icon/appraise_bumen.png"/>
                  <div class="float-man-l-t">
                    {{item_child_name.name }}
                  </div>
                </div>
                <el-checkbox
                  v-if="item.is_unfold && item.is_select"
                  v-model="item_child_name.is_checked"
                  @change="handleMan(index, index_child_name, item_child_name.is_checked)"
                />
              </div>
            </div>
          </el-collapse-transition>

          <div v-if="item.is_unfold && item.is_select && item.child.length" class="m-t-14 flex flex-d-r-r">
            <span @click="handleCancel(index)" class="float-buttom cancel-text cursor-p">取消</span>
            <span @click="handleCompared(index)" class="float-buttom compare-text cursor-p">对比</span>
            <span @click="handleCancelttenAtion(index)" v-if="(index !== 0 && router_type !== 'record') || (router_type === 'record' && index === 2 )" class="float-buttom no-ation-text cursor-p"
            >取消关注</span
            >
          </div>
        </div>
      </el-scrollbar>
    </el-main>
  </el-container>


</template>

<script>
import { syncRequest } from '@/utils/httpRequet'

import TreeView from '../TreeView'

import { throttle } from 'throttle-debounce'

import { clickoutside } from '../utils.js'

export default {
  name: 'MailList',
  directives: { clickoutside },
  props: {
    duty_list: {
      type: Array,
      default: []
    }, //tab跳转
    float_list: {
      type: Array,
      default: []
    },
    duty_index: {
      type: Number,
      default: 0
    },
    router_type: {
      type: String,
      default: ''
    } //路由跳转
  },
  components: { TreeView },
  data() {
    return {
      xiala_url: require('@/assets/appraise/icon/appraise_xiala.png'),
      xiala_lift_url: require('@/assets/appraise/icon/appraise_xiala_left.png'),

      search_name: '', //搜索字段
      searchResultShow: false,    // 是否显示搜索结果
      departmentList: [],  // 搜索结果 部门数据
      personList: [], // 搜索结果的 人员列表
      departmentIdsArr: [],   // 已经选择的部门id数组
      personIdsArr: [],   // 已经选择的人员id数组

      search_list: [],
      drop_men: [],
      drop_part: [],
      is_drop_men: false,
      is_drop_part: false,
      is_drop: false,
      duty_compared: [{ id: [] }, { id: [] }, { id: [] }], //职责对比
      plan_compared: [{ id: [] }, { id: [] }, { id: [] }], //计划对比
      record_compared: [{ id: [] }, { id: [] }, { id: [] }], //记录对比

      selectedList: [],  // 保存的是已经选中了的项目 人员与部门混合在一起
      treeData: []   // 递归树数据
    }
  },
  mounted() {
    // console.log('float_list', this.float_list)
    this.init()

    // 获取递归数据
    const user_tree = syncRequest({
      url: 'pubGetDeptUserTree',
      data: { orgId: '' }
    })
    // console.log('user_tree', user_tree)

    this.treeData = user_tree.data
  },
  methods: {
    //初始化
    init() {
      //获取部门成员
      let pub_users = syncRequest({
        url: 'pubGetDeptUsers',
        data: {
          deptId: ''
        }
      })
      if (pub_users.errorCode === '1') {
        let my_department_list = pub_users.data
        my_department_list = JSON.parse(JSON.stringify(my_department_list).replace(/userName/g, 'name'))
        my_department_list.forEach(res => {
          this.$set(res, 'is_checked', false)
        })
        this.float_list[0].child = my_department_list
      }
      if(this.router_type === 'record') {
        //最新日记录@我的人员信息
        let relate_meList = syncRequest({
          url: this.duty_index === 0?'getRelateMeList':this.duty_index === 1?'weekGetRelateMeList':'monthGetRelateMeList'
        })
        if (relate_meList.errorCode === '1') {
          let click_my_pople = relate_meList.data
          click_my_pople = JSON.parse(JSON.stringify(click_my_pople).replace(/userName/g, 'name'))
          click_my_pople.forEach(res => {
            this.$set(res, 'is_checked', false)
          })
          this.float_list[1].child = click_my_pople
        }
      }else{
        //获取关注部门
        let focus_dept = syncRequest({
          url: 'pubGetFocusDept'
        })

        if (focus_dept.errorCode === '1') {
          let attention_department = focus_dept.data
          attention_department = JSON.parse(JSON.stringify(attention_department).replace(/focusDeptName/g, 'name'))
          attention_department.forEach(res => {
            this.$set(res, 'is_checked', false)
          })
          this.float_list[1].child = attention_department
        }
      }
      //获取关注人
      let focus_user = syncRequest({
        url: 'pubGetFocusUser'
      })
      if (focus_user.errorCode === '1') {
        let attention_men = focus_user.data
        attention_men = JSON.parse(JSON.stringify(attention_men).replace(/focusUserName/g, 'name'))
        attention_men.forEach(res => {
          this.$set(res, 'is_checked', false)
        })
        this.float_list[2].child = attention_men
      }
    },
    // 点击树下的关注
    followTree() {
      if (this.selectedList.length === 0 ) return this.$message.warning('请选择一项')
      let personnel = []
      let partment = []
      let personnel_interface = null
      let partment_interface = null
      this.selectedList.forEach(res => {
        res.type === '1' ? partment.push(res.id) : personnel.push(res.id)
      })
      if (this.isFollow(this.selectedList)) return this.$message.warning(`已经关注${this.isFollow(this.selectedList)}`)
      // 人
      if(personnel.length) {
        personnel_interface = syncRequest({ url: 'pubFocusUser', data: { userIds: personnel.join(',') } })
      }
      //部门
      if(partment.length) {
        partment_interface = syncRequest({ url: 'pubFocusDept', data: { deptIds: partment.join(',') } })
      }
      if ((personnel.length && personnel_interface.errorCode !== '1')||(partment.length && partment_interface.errorCode !== '1')) {
        this.$message.success({ message: '关注失败', center: true })
      }else{
        this.init()
        this.$message.success({ message: '关注成功', center: true })
      }

    },
    // 点击树下的比较
    comparedTree() {
      if (!this.selectedList.length) return this.$message.warning('至少选择一项')

      const uniqueTypeArr =  [...new Set(this.selectedList.map(x => x.type))] // 去重
      if (uniqueTypeArr.length !== 1) return this.$message.warning('部门不能和人员比较')

      const idArr = this.selectedList.map(x => x.id)
      this.dutyCompare(idArr, uniqueTypeArr[0] === '2' ? 0: 1)
    },

    // 判断是否已经关注了 某人 或 某部门 // compareType: 人员传0 部门传1
    isFollow(array) {
      // 已经关注了的 人 和 部门
      const followedPersonList = this.float_list[2].child
      const followedDepartmentList = this.float_list[1].child
      let name_list = []
      array.forEach(res=> {
        if(res.type === '1') {
          if(followedDepartmentList.filter(x => x.focusDeptId === res.id).length) {
            name_list.push(res.label)
          }
        }else{
          if(followedPersonList.filter(x => x.focusUserId === res.id).length) {
            name_list.push(res.label)
          }
        }
      })
      return name_list.join(',')  // 只是返回布尔值而已
    },

    // 点击 搜索结果下的关注
    followSearch(compareType) { // compareType: 人员传0 部门传1

      if (compareType === 0 && this.personIdsArr.length === 0) return this.$message.warning('请选择一项')
      if (compareType === 1 && this.departmentIdsArr.length === 0) return this.$message.warning('请选择一项')

      console.log(this.personIdsArr)
      let personnel_interface = null
      let partment_interface = null
      if (this.isFollow(this.personIdsArr)) return this.$message.warning(`已经关注${this.isFollow(this.personIdsArr)}`)
      if (this.isFollow(this.departmentIdsArr)) return this.$message.warning(`已经关注${this.isFollow(this.departmentIdsArr)}`)
      //人
      if(this.personIdsArr.length) {
        personnel_interface = syncRequest({ url: 'pubFocusUser', data: { userIds: this.personIdsArr.join(',') } })
      }
      //部门
      if(this.departmentIdsArr.length) {
        partment_interface = syncRequest({ url: 'pubFocusDept', data: { deptIds: this.departmentIdsArr.join(',') } })
      }
      if ((this.personIdsArr.length && personnel_interface.errorCode !== '1')||(this.departmentIdsArr.length && partment_interface.errorCode !== '1')) {
        this.$message.success({ message: '关注失败', center: true })
      }else{
        this.init()
        this.$message.success({ message: '关注成功', center: true })
      }
    },

    // 职责对比 提交 vuex
    dutyCompare(idArr, compareType) {
      this.$store.commit('appraise/SAVE_ID', { id: idArr, num: compareType })
      let routesMap = this.$store.state.permission.routesMap
      let path = ''
        if(this.router_type !== 'record') {
          path = `appraise/${this.router_type}/compared/index`
        }else{
          this.$emit('recordCompared', idArr)
        }
      this.$store.dispatch('tapRouter/setConfig', routesMap[path])
    },

    // 点击搜索结果下的对比
    compareSearch(compareType) {    // compareType: 人员传0 部门传1

      if (compareType === 0 && !this.personIdsArr.length) return this.$message.warning('请至少选择一项')
      if (compareType === 1 && !this.departmentIdsArr.length) return this.$message.warning('请至少选择一项')

      const idArr = compareType === 0 ? this.personIdsArr : this.departmentIdsArr // 部门 or 人员 id数组 ['hgdg2', 'dfgdf3']

      this.dutyCompare(idArr, compareType)
    },
    searchInput: throttle(500, function(keyword) {
      this.departmentIdsArr = []  // 清空已选
      this.personIdsArr = [] // 清空已选
      this.calcDepartmentList(keyword)   // 两个计算
      this.calcPersonList(keyword)
    }),
    // 计算搜索结果的部门列表
    calcDepartmentList(str) {
      const allDepartment = this.treeData[0]?.children || []
      let resArr =allDepartment.length?allDepartment.filter(x => x.children && x.label.includes(str)):[]
      this.departmentList = resArr
    },
    // 计算搜索的人员列表
    calcPersonList(str) {
      const dePerson = this.treeData[0]?.children || []
      let resArr = []
      dePerson.length?dePerson.map(item => {
        if(item.children) {
          item.children.length?item.children.map(x => {
            if(x.label.includes(str)) {
              resArr.push(x)
            }
          }):''
        }else{
          if(item.label.includes(str)) {
            resArr.push(item)
          }
        }
      }, []):''
      this.personList = resArr
    },

    clickoutside() {
      this.searchResultShow = false
    },
    //停止
    hanleStop() {
    },
    /**
     * @name 搜索
     */
    handleSearch() {
      this.drop_part = []
      this.drop_men = []
      let query_dept_user = syncRequest({
        url: 'queryDeptUserTree',
        data: {
          orgId: '',
          name: this.search_name
        }
      })
      if (query_dept_user.errorCode === '1') {
        this.search_list = query_dept_user.data[0].children
        this.search_list.forEach(res => {
          this.$set(res, 'is_checked', false)
          this.$set(res, 'is_unfold', true)
          res.children.forEach(result => {
            this.$set(result, 'is_checked', false)
          })
        })
        this.is_drop = true
      } else {
        this.is_drop = false
        this.$message({
          message: '请输入关键字',
          type: 'warning',
          duration: 2000,
          center: true
        })
      }
    },
    /**
     * @name 选择职责
     */
    handleDuty(index) {
      this.is_drop = false
      let routesMap = this.$store.state.permission.routesMap
      let path = ''
      if(this.router_type !== 'record') {
        path = index === 0 ? `appraise/${this.router_type}/personal/index` : `appraise/${this.router_type}/department/index`
      }else{
        path = index === 0 ? `appraise/${this.router_type}/diary/index`
          : index === 1 ? `appraise/${this.router_type}/weekRecord/index`
            : `appraise/${this.router_type}/monthSummary/index`
      }
      this.$store.dispatch('tapRouter/setConfig', routesMap[path])
    },
    /**
     * @name 展开列表
     * @param index
     */
    handleUnfold(index, type) {
      if (type === 0) {
        this.search_list[index].is_unfold = !this.search_list[index].is_unfold
      } else if (type === 1) {
        this.float_list[index].is_unfold = !this.float_list[index].is_unfold
      }
    },
    /**
     * @name 展开列表编辑
     * @param index
     */
    handleUnfoldEit(index) {
      this.float_list[index].is_select = !this.float_list[index].is_select
    },
    /**
     * @name 选择列表人员
     */
    handleDropMan(check, index, child_index) {
      if (child_index === undefined) {
        if (check) {
          this.drop_part.push(this.search_list[index].id)
          this.is_drop_part = true
        } else {
          this.drop_part.splice(this.drop_part.indexOf(this.search_list[index].id), 1)
          if (!this.drop_part.length) {
            this.is_drop_part = false
          }
        }
      } else {
        if (check) {
          this.drop_men.push(this.search_list[index].children[child_index].id)
          this.is_drop_men = true
        } else {
          this.drop_men.splice(this.drop_men.indexOf(this.search_list[index].children[child_index].id), 1)
          if (!this.drop_men.length) {
            this.is_drop_men = false
          }
        }
      }
    },
    /**
     * @name 关注
     */
    handleCancelDrop() {
      if (this.is_drop_men && this.drop_men.length == 1) {
        let repate_man = false
        this.float_list[2].child.forEach(res => {
          if (res.focusUserId == this.drop_men[0]) {
            repate_man = true
          }
        })
        if (repate_man) {
          this.$message({
            message: '已关注此人员',
            type: 'warning',
            duration: 2000,
            center: true
          })
        } else {
          let focus_user = syncRequest({
            url: 'pubFocusUser',
            data: {
              userId: this.drop_men[0]
            }
          })
          if (focus_user.errorCode === '1') {
            this.init()
            this.$message({
              message: '关注成功',
              type: 'success',
              duration: 2000,
              center: true
            })
          }
        }
      } else if (this.drop_men.length > 1) {
        this.$message({
          message: '仅勾选一个人员',
          type: 'warning',
          duration: 2000,
          center: true
        })
      }
      if (this.is_drop_part && this.drop_part.length == 1) {
        let repate_part = false
        this.float_list[1].child.forEach(res => {
          if (res.focusDeptId == this.drop_part[0]) {
            repate_part = true
          }
        })
        if (repate_part) {
          this.$message({
            message: '已关注此部门',
            type: 'warning',
            duration: 2000,
            center: true
          })
        } else {
          let focus_dept = syncRequest({
            url: 'pubFocusDept',
            data: {
              deptId: this.drop_part[0]
            }
          })
          if (focus_dept.errorCode === '1') {
            this.init()
          }
        }
      } else if (this.drop_part.length > 1) {
        this.$message({
          message: '仅勾选一个部门',
          type: 'warning',
          duration: 2000,
          center: true
        })
      }
    },
    /**
     * @name 对比列表人员
     */
    handleComparedDrop() {
      if (this.is_drop_men && !this.is_drop_part) {
        if (this.drop_men.length) {
          const id = this.drop_men
          let num = 0
          this.$store.commit('appraise/SAVE_ID', { id, num })
          let routesMap = this.$store.state.permission.routesMap
          let path = ''
          if(this.router_type !== 'record') {
            path = `appraise/${this.router_type}/compared/index`
          }else{
            this.$emit('recordCompared', id)
          }
          this.$store.dispatch('tapRouter/setConfig', routesMap[path])
        } else {
          this.$message({
            message: '请选择至少一项',
            type: 'warning',
            duration: 2000,
            center: true
          })
        }
      } else if (!this.is_drop_men && this.is_drop_part) {
        if (this.drop_part.length) {
          let id = this.drop_part
          let num = 1
          this.$store.commit('appraise/SAVE_ID', { id, num })
          let routesMap = this.$store.state.permission.routesMap
          let path = ''
          if(this.router_type !== 'record') {
            path = `appraise/${this.router_type}/compared/index`
          }else{
            this.$emit('recordCompared', id)
          }
          this.$store.dispatch('tapRouter/setConfig', routesMap[path])
        } else {
          this.$message({
            message: '请选择至少一项',
            type: 'warning',
            duration: 2000,
            center: true
          })
        }
      }
      if (this.is_drop_men && this.is_drop_part) {
        this.$message({
          message: '不能同时选择人员和部门',
          type: 'warning',
          duration: 2000,
          center: true
        })
      }
      if (!this.is_drop_men && !this.is_drop_part) {
        this.$message({
          message: '请选择选择人员和部门',
          type: 'warning',
          duration: 2000,
          center: true
        })
      }
    },
    /**
     * @name 选择人员
     */
    handleMan(index, child_index, check) {
      let id = ''
      if(this.router_type !== 'record') {
        id = index === 0
          ? this.float_list[index].child[child_index].userId
          : index === 1
            ? this.float_list[index].child[child_index].focusDeptId
            : this.float_list[index].child[child_index].focusUserId
      }else{
        id = index !== 2
          ? this.float_list[index].child[child_index].userId
            : this.float_list[index].child[child_index].focusUserId
      }
      if (this.router_type === 'duty') {
        if (check) {
          this.duty_compared[index].id.push(id)
        } else {
          this.duty_compared[index].id.splice(this.duty_compared[index].id.indexOf(id), 1)
        }
      }
      if (this.router_type === 'plan') {
        if (check) {
          this.plan_compared[index].id.push(id)
        } else {
          this.plan_compared[index].id.splice(this.plan_compared[index].id.indexOf(id), 1)
        }
      }
      if (this.router_type === 'record') {
        if (check) {
          this.record_compared[index].id.push(id)
        } else {
          this.record_compared[index].id.splice(this.record_compared[index].id.indexOf(id), 1)
        }
      }
    },
    /**
     * @name 人员职责
     */
    handleManDuty(item, index) {
      if(this.router_type !== 'record') {
        let name = item.name
        let id = index === 0 ? item.userId : index === 1 ? item.focusDeptId : item.focusUserId
        let type = index === 1 ? 1 : 0
        this.$emit('handleManDuty', { id, type, name })
      }else{
        let name = item.name
        let id = index !== 2 ? item.userId : item.focusUserId
        let type = 0
        this.$emit('handleManDuty', { id, type, name })
      }
    },
    /**
     * @name 列表人员职责
     */
    handleManDutyDrop(item, type) {
      let name = item.label
      let id = item.id
      this.$emit('handleManDuty', { id, type, name })
    },
    /**
     * @name 取消
     */
    handleCancel(index) {
      this.float_list[index].child.forEach(res => (res.is_checked = false))
      if (this.router_type == 'duty') {
        this.duty_compared[index].id = []
      }
      if (this.router_type == 'plan') {
        this.plan_compared[index].id = []
      }
      if (this.router_type == 'record') {
        this.record_compared[index].id = []
      }
    },
    /**
     * @name 对比
     */
    handleCompared(index) {
      if (!this.duty_compared[index].id.length
        && !this.plan_compared[index].id.length
        && !this.record_compared[index].id.length) return this.$message({
        message: '请选择至少一个人员或部门',
        type: 'warning',
        duration: 2000,
        center: true
      })
      let id = []
      let num = index === 1 ? 1 : 0
      let path = ''
      if(this.router_type !== 'record') {
        id = this.router_type === 'duty'?this.duty_compared[index].id:this.plan_compared[index].id
        path = `appraise/${this.router_type}/compared/index`
        this.$store.commit('appraise/SAVE_ID', { id, num })
        let routesMap = this.$store.state.permission.routesMap
        this.$store.dispatch('tapRouter/setConfig', routesMap[path])
      }else{
        id  = this.record_compared[index].id
        this.$emit('recordCompared', id)
      }
    },
    /**
     * @name 取消关注
     * @param index
     */
    handleCancelttenAtion(index) {
      if (this.duty_compared[index].id.length === 0 && this.plan_compared[index].id.length === 0 && this.record_compared[index].id.length === 0) {
        this.$message({
          message: '请选择至少一个部门或人员',
          type: 'warning',
          duration: 2000,
          center: true
        })
      } else {
        if (this.router_type != 'record' && index === 1) {
          let pub_dis_focus_dept = syncRequest({
            url: 'pubDisFocusDept',
            data: {
              deptIds: this.router_type == 'duty'?this.duty_compared[index].id.join(','):this.router_type == 'plan'?this.plan_compared[index].id.join(','):this.record_compared[index].id.join(',')
            }
          })
          if (pub_dis_focus_dept.errorCode === '1') {
            this.float_list[index].child = this.float_list[index].child.filter(res => !res.is_checked)
            this.duty_compared[index].id = []
            this.plan_compared[index].id = []
            this.record_compared[index].id = []
            this.$message({
              message: '已取消关注',
              type: 'success',
              duration: 2000,
              center: true
            })
          } else {
            this.$message({
              message: '取消关注失败',
              type: 'error',
              duration: 2000,
              center: true
            })
          }
        } else {
          let pub_dis_focus_user = syncRequest({
            url: 'pubDisFocusUser',
            data: {
              userIds: this.router_type == 'duty'?this.duty_compared[index].id.join(','):this.router_type == 'plan'?this.plan_compared[index].id.join(','):this.record_compared[index].id.join(',')
            }
          })
          if (pub_dis_focus_user.errorCode === '1') {
            this.float_list[index].child = this.float_list[index].child.filter(res => !res.is_checked)
            this.duty_compared[index].id = []
            this.plan_compared[index].id = []
            this.record_compared[index].id = []
            this.$message({
              message: '已取消关注',
              type: 'success',
              duration: 2000,
              center: true
            })
          } else {
            this.$message({
              message: '取消关注失败',
              type: 'error',
              duration: 2000,
              center: true
            })
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.cursor-p {
  cursor: pointer;
}

.flex {
  display: flex;
}

.flex-d-r-r {
  flex-direction: row-reverse;
}

.right-aside {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #ffffff;
  position: relative;
  overflow: scroll;
}

// ::v-deep .el-input__inner {
//   padding: 0 1.6rem !important;
// }
.p-9-0-8-14 {
  padding: 8px 7px 8px 10px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 4px;

  &:hover {
    // background-color:#f1f5fb;
    color: #1a65e2;
  }
}

.p-9-14-8 {
  // padding: 0 0 21px 14px;
  &.hover {
    border-radius: 4px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    background-color: #f9fafb;
  }
}

.m-t-14 {
  margin: 4px 6px 0px;
  border-top: 1px dashed #eee;
  padding: 8px 6px 0px;
}

.cancel-text {
  background-color: rgba(255, 244, 242, 1);
  color: rgba(214, 32, 32, 1);
}

.compare-text {
  background-color: rgba(234, 238, 254, 1);
  color: rgba(26, 102, 225, 1);
}

.no-ation-text {
  background-color: rgba(237, 239, 242, 1);
  color: rgba(156, 159, 164, 1);
}

.interval-line {
  margin-top: 0.5rem;
  height: 0.05rem;
  background-color: rgba(0, 0, 0, 0.04);
}

.m-t-9 {
  height: 100%;
  width: 100%;
}

.m-r-7 {
  margin-right: 6px;
}

.search {
  width: 100%;
  border: 1px solid rgba(248, 248, 248, 1);
  background-color: rgba(252, 252, 252, 1);
}

.search-result {
  position: absolute;
  z-index: 99;
  background-color: #fff;
  width: 280px;
  padding: 0 0 15px 0;
  box-shadow: 0 5px 5px 0 #eee;

  max-height: 500px;
  overflow: auto;

  .gray-line {
    background-color: #eee;
    height: .5px;
    margin: 15px;
  }

  .title-name {
    padding-left: 20px;
    font-size: 14px;
    color: #909399;
    line-height: 30px;
  }

  .epmty-text {
    text-align: center;
    font-size: 14px;
    color: #8f8f8f
  }

  .data-item {
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;

    transition: 0.2s;

    &:hover {
      background-color: #F5F7FA;
    }
  }
}

.m-t-20 {
  margin-top: 10px
}

.drop-down {
  width: 90%;
  padding: 0.4rem;
  background-color: #ffffff;
  position: absolute;
  top: 2.5rem;
  left: 0.7rem;
  overflow: scroll;
  border-radius: 0.2rem;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 0.2rem 0.3rem 0 rgba(209, 209, 209, 0.5);
}

.drop-box {
  flex: 1;
}

.float-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;

  .oper-checkbox-img-container {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 9;

    i {
      font-size: 18px;
      color: #d5d9df;
    }

    &:hover {
      .oper-checkbox-img-container {
        i {
          color: #1a65e2;
        }

      }
    }
  }

  &:hover {
    .oper-checkbox-img-container {
      i {
        color: #999;
      }

      &:hover {
        i {
          color: #1a65e2;
        }
      }
    }
  }
}

.department-title {
  transition: 0.2s;
  padding: 8px 7px;

  border-radius: 4px;
  transition: 0.2s;
  cursor: pointer;

  flex-grow: 1;

  &:hover {
    background-color: #f4f8ff;
  }
}

.department-title-active {
  color: #1a65e2;
}

.float-head-img {
  width: 16px;
  height: 16px;

  transition: 0.2s;
}

.float-head-f {
  font-size: 16px;
  cursor: pointer;
}
.f-s-18 {
  font-size: 18px;
}
.drop-man {
  display: flex;
  align-items: center;
  margin-top: 15px;
  padding-left: 20px;
}

.float-man {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 8px 12px 8px 26px;

  border-radius: 4px;
  transition: 0.2s;
  cursor: pointer;

  &:hover {
    background-color: #ebf1fc;
  }
}

.oper-checkbox-img-container {
  padding: 8px;
  flex-shrink: 0;

  transition: 0.2s;
  border-radius: 4px;

  cursor: pointer;

  &:hover {
    i {
      color: #1a65e2;
    }
  }
}

.float-man-l {
  display: flex;
  align-items: center;
}

.float-man-l-img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 8px;
  font-size: 16px;
  color: #ffffff;
  background-image: linear-gradient(rgba(241, 188, 87, 1), rgba(249, 172, 121, 1));
  box-shadow: 0 4px 8px 0 rgba(209, 209, 209, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.float-man-l-t {
  font-size: 16px;
  // display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.float-buttom {
  font-size: 13px;
  margin-left: 8px;
  padding: 0px 12px;
  border-radius: 4px;
  line-height: 28px;
}

.right_body {
  background-color: #fff;
  border-radius: 4px;

  .heder_boder_fot {
    border-bottom: 1px solid #f5f5f5;
    margin: 10px;
    margin-bottom: 4px;
    padding-bottom: 4px !important;
  }

  .fot_body {
    height: 100%;
    width: 100%;

    .p-9-14-8 {
      margin: 0 10px;

      &.hover {
        margin-bottom: 8px;
      }
    }

  }
}

@media (max-width: 1024px) {
  .float-head-f {
    font-size: 14px;
    cursor: pointer;
  }
  .f-s-18 {
    font-size: 16px;
  }
  .float-man-l-t {
    font-size: 14px;
    // display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .float-man-l-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    margin-right: 8px;
    font-size: 14px;
    color: #ffffff;
    background-image: linear-gradient(rgba(241, 188, 87, 1), rgba(249, 172, 121, 1));
    box-shadow: 0 4px 8px 0 rgba(209, 209, 209, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }

}
</style>
